<template>
  <div class="app-container">
    <div>
      <el-input placeholder="请输入编号" v-model="numberId" clearable class="stock-input">
        <template slot="prepend">编号</template>
      </el-input>

      <el-input placeholder="请输入成本" v-model="cost" clearable class="stock-input">
        <template slot="prepend">成本</template>
      </el-input>

      <el-input placeholder="请输入进货数量" v-model="count" clearable class="stock-input" @keyup.enter.native="submit">
        <template slot="prepend">件数</template>
      </el-input>

      <el-input placeholder="请输入倍数" v-model="multiple" clearable class="stock-input" @keyup.enter.native="submit">
        <template slot="prepend">倍数</template>
      </el-input>

      <el-input placeholder="请输入备注" v-model="commit" clearable class="stock-input" @keyup.enter.native="submit">
        <template slot="prepend">备注</template>
        <el-button slot="append" icon="el-icon-check" @click="submit"></el-button>
      </el-input>

      <!-- <el-button size="mini" class="stock-input" @click="rest">重置表格</el-button> -->
      <!-- <el-button size="mini" class="stock-input" @click="saveToServer">提交到服务器</el-button> -->
    </div>
    <div>
      <el-table
        :data="stockData"
        border
        max-height="500"
        size="mini"
        style="width: 100%">
        <el-table-column
          type="index">
        </el-table-column>

        <el-table-column
          prop="numberId"
          label="编号">
        </el-table-column>

        <el-table-column
          prop="cost"
          label="成本">
        </el-table-column>

        <el-table-column
          prop="multiple"
          label="倍数">
        </el-table-column>

        <el-table-column
          prop="pricing"
          label="定价">
        </el-table-column>

        <el-table-column
          prop="count"
          label="件数">
        </el-table-column>

        <el-table-column
          prop="commit"
          label="备注">
        </el-table-column>

        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, stockData)"
              type="text"
              size="small">
              移除
            </el-button>
            <!-- <el-button
              type="text"
              size="small">
              编辑
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  watch: {
  },

  data () {
    return {
      multiple: '',
      numberId: '',
      cost: '',
      count: '',
      commit: '',
      stockData: []
    }
  },

  methods: {
    submit () {
      const info = {
        numberId: this.numberId,
        commit: this.commit,
        cost: this.cost,
        count: this.count,
        pricing: (this.cost * this.multiple).toFixed(2),
        multiple: this.multiple
      }
      this.$store.dispatch('AddStock', info).then((res) => {
        // console.log(res)
        info.id = res.data.id
        this.stockData.push(info)
      }).catch((err) => {
        console.log(err)
      })
      // this.stockData.push(info)
      this.numberId = ''
      this.cost = ''
    },
    deleteRow (index, rows) {
      this.$store.dispatch('DelStock', { id: rows[index].id }).then((res) => {
        rows.splice(index, 1)
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.stock {
  &-input {
    margin-bottom: 10px;
  }
}
</style>
